<template>
    <div class="pay">
        <van-nav-bar title="确认支付" left-text="取消" @click-left="cancel" />
        <div class="box_896X1">
            <p class="text_897X1">订单付款</p>
            <p class="text_898X1">￥{{ BuyNumber.money }}</p>
            <span class="payee">收款方</span>
            <span class="coffee">luckincoffe瑞幸咖啡</span>
        </div>
        <van-button type="success" class="text_904X1" @click="goToPayTage">立即支付</van-button>
        <p class="text_905X1">支付安全由中国人民财产保险股份有限公司承保</p>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { addCoupon, getUserCoupon } from '@/api/api'
import { useRouter, useRoute } from 'vue-router'
import { useBuyNumber } from '@/store/discountCoupon.js'
const BuyNumber = useBuyNumber()
const router = useRouter()
const route = useRoute()
//购买优惠券的时间
const nowTime = new Date
const futureTime = new Date(nowTime.getTime() + (7 * 24 * 60 * 60 * 1000))

//当前时间
const now_time = nowTime.getFullYear() + '-' + (nowTime.getMonth() - 0 + 1) + '-' + nowTime.getDate()
// 7天后时间
const future_time = futureTime.getFullYear() + '-' + (futureTime.getMonth()-0+1) + '-' + futureTime.getDate()
const couponArr = ref([])
const findCouponArr = () => {
    BuyNumber.arr.forEach(items => {
        couponArr.value = []
        BuyNumber.arr.forEach(items => {
            if (items.value != 0) {
                couponArr.value.push(items.coupon_id)
                //
                // console.log(couponArr.value)
            }
        });
    });
}
findCouponArr()
const couponArr2 = ref([])
const findCouponArr2 = () => {
    BuyNumber.arr.forEach(items => {
        couponArr2.value = []
        BuyNumber.arr.forEach(items => {
            if (items.value != 0) {
                couponArr2.value.push(items.value)
                //
                console.log(couponArr2.value)
            }
        });
    });
}
findCouponArr2()
// 接收其他组件传过来的参数：上一个路由地址
const oldUrl = route.query.url
console.log(oldUrl);


// 跳到购买失败页面
const cancel = () => router.push('cart/cancelOrder')
// 判断上一个路由地址，跳转不同的页面
const goToPayTage = async () => {
    if (oldUrl === 'confirmOrder' || '/cart/goPay') {
        router.push('cart/payComplete')
    }
    if (oldUrl === 'confirmorder_1') {
        router.push('paysuccess')
        const res = await addCoupon(
            {
            uId: 11,
            coupon_id: couponArr.value[0],
            coupon_num: couponArr2.value[0],
            now_time: now_time,
            future_time: future_time
        },
        
        )
        const res1 = await getUserCoupon({ uId: 11 })
        console.log(res)
    }

}

</script>

<style lang="scss" scoped>
.pay {
    background-color: #f8f8f8;
    height: 100vh;

    .van-nav-bar {
        background-color: #f8f8f8;
        padding-top: 10px;

    }

    .box_896X1 {
        width: 375px;
        height: 156px;
        // margin-top: 10px;
        color: rgba(80, 80, 80, 1);
        background-color: rgba(255, 255, 255, 1);
        font-size: 14px;
        line-height: 150%;
        position: relative;

        .text_897X1 {
            width: 72px;
            height: 27px;
            margin-left: 152px;
            padding-top: 10px;
            color: rgba(56, 56, 56, 1);
            font-size: 18px;
            line-height: 150%;
            // text-align: left;
            font-weight: bold;
        }

        .text_898X1 {
            width: 102px;
            height: 57px;
            margin-left: 120px;
            // top: 97px;
            color: rgba(56, 56, 56, 1);
            font-size: 38px;
            line-height: 150%;
            // text-align: left;
            font-weight: bold;
        }

        .payee {
            position: absolute;
            left: 15px;
            top: 120px;
        }

        .coffee {
            position: absolute;
            left: 235px;
            top: 120px;
        }
    }

    .text_904X1 {
        width: 355px;
        height: 46px;
        left: 10px;
        top: 25px;
        color: rgba(255, 255, 255, 1);
        background-color: rgba(73, 194, 101, 1);
        border-radius: 4px;
        font-size: 18px;
        line-height: 150%;
        text-align: center;
        font-weight: bold;
    }

    .text_905X1 {
        width: 252px;
        height: 18px;
        margin-left: 62px;
        margin-top: 380px;
        color: rgba(166, 166, 166, 1);
        font-size: 12px;
        line-height: 150%;
        text-align: left;
    }

}
</style>